<template>
    <div class="wrapper">
    <div class="banner">
      <img src="/imgs/user.jfif" alt="" />
      <a href="/login">立即登录</a>
    </div>

    <div class="middle">
      <div class="grid">
        <p class="value">0张</p>
        <p class="key">卖座券</p>
      </div>
      <div class="grid">
        <p class="value">￥0</p>
        <p class="key">余额</p>
      </div>
    </div>

    <ul class="lines">
      <li>
        <a href="">
          <i class="fa fa-ticket icon myRed"></i>
          <span>电影订单</span>
          <i class="fa fa-angle-right more"></i>
        </a>
      </li>

      <li>
        <a href="">
          <i
            class="fa fa-envelope-open-o icon myYellow"
            style="font-size: 1.1rem"
          ></i>
          <span>组合红包</span>
          <i class="fa fa-angle-right more"></i>
        </a>
      </li>
      <li>
        <a href="">
          <i class="fa fa-headphones icon myGreen"></i>
          <span>帮助与客服</span>
          <i class="fa fa-angle-right more"></i>
        </a>
      </li>
      <li>
        <a href="">
          <i class="fa fa-gear icon myBlue" style="font-size: 1.3rem"></i>
          <span>设置</span>
          <i class="fa fa-angle-right more"></i>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default{}
</script>
<style lang="scss" scoped>
@import "../assets/variable.scss";
.myRed {
  color: $myRed;
}
.myYellow {
  color: $myYellow;
}
.myGreen {
  color: $myGreen;
}
.myBlue {
  color: $myBlue;
}
.wrapper {
  background-color: #eee;
  height: calc(100vh - 50px);
  font-size: 1rem;

  .title {
    text-align: center;
    margin-top: 50px;
  }

  .banner {
    width: 100%;
    height: 9rem;
    background: url("/imgs/bg.png") 0px -50px / cover no-repeat;
    display: flex;
    align-items: center;

    img {
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      margin-left: 1.5rem;
      margin-right: 1rem;
      border: 2px solid #fff9;
      padding: 1px;
    }

    a {
      color: white;
    }
  }

  .middle {
    width: 100%;
    height: 80px;
    display: flex;
    background-color: white;

    .grid {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;

      p {
        text-align: center;
      }

      p.value {
        font-size: 1.1rem;
        margin-bottom: 2px;
      }

      p.key {
        font-size: 0.8rem;
        color: #aaa;
      }
    }
  }

  .lines {
    margin-top: 10px;
    background-color: white;

    li {
      height: 49px;
      border-bottom: 1px solid #eee;

      a {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 1rem;

        .icon {
          font-size: 1.2rem;
        }

        span {
          flex-grow: 1;
          margin-left: 1rem;
          font-size: 1rem;
          color: #666;
        }

        .more {
          color: #ccc;
        }
      }
    }
  }
}
</style>
